<template>
  <view class="search-page">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="试着搜索你喜欢的宠物吧😫" v-model="searchQuery" />
      <image class="search-icon" src="/static/search-icon.png" mode="aspectFit" />
    </view>

    <!-- 最近搜索 -->
    <view class="section">
      <view class="section-title">最近搜索</view>
      <view class="tags">
        <view class="tag" v-for="(item, index) in recentSearches" :key="index">{{ item }}</view>
      </view>
    </view>

    <!-- 猜你想找 -->
    <view class="section">
      <view class="section-title">猜你想找</view>
      <view class="tags">
        <view class="tag" v-for="(item, index) in suggestions" :key="index">{{ item }}</view>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      searchQuery: '',
      recentSearches: ['荷兰乳牛', '马克杯', '莫斯利安', '安佳奶粉', '莫斯利安酸奶', '新婚礼物', '小米'],
      suggestions: ['锅具套装', '七分袖连衣裙', '蒙古酸牛奶', '莫斯利安酸奶', '新婚礼物', '牛奶']
    };
  },
  methods: {
    // 这里可以添加搜索逻辑，后续可以将搜索记录存储到后端
    search() {
      if (this.searchQuery) {
        this.recentSearches.push(this.searchQuery);
        this.searchQuery = '';
      }
    }
  }
};
</script>

<style>
.search-page {
  padding: 10px;
  background-color: #f5f5f5;
  height: 100vh;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 5px;
  border-radius: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-input {
  flex: 1;
  height: 35px;
  border: none;
  outline: none;
  padding-left: 10px;
  font-size: 14px;
}

.search-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #e0e0e0;
  padding: 5px 10px;
  border-radius: 15px;
  margin: 5px;
  font-size: 14px;
  color: #333;
}

</style>